<template>
	<div>
		<div class="part floor-item" v-for="item in siteList" :key="item.ftitle">
			<h2>
				<strong>{{ item.ftitle }}</strong>
			</h2>
			<el-row class="items">
				<div class="item" v-for="site in item.list" :key="site.title" ref="item">
					<el-col :xs="12" :sm="8" :md="6" :lg="4" >
						<a :href="site.url" target="_blank">
							<img :src="site.img" :alt="site.title" />
							<h3>{{ site.title }}</h3>
							<p v-if="site.desc">{{ site.desc }}</p>
						</a>
					</el-col>
				</div>
			</el-row>
		</div>
		<el-row>
			<el-col :xs="24" :sm="24" :md="24" class="hidden-sm-and-down">
				<div><img class="banner" src="../assets/banner.jpg" alt="" /></div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
export default {
	name: 'siteList',
	props: {
		siteList: Array
	},
	methods: {},
	mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.part {
	background: #fff;
	margin-top: 32px;
	border-radius: 10px;
	h2 {
		padding: 13px 36px;
		border-bottom: 1px solid #f1f4f9;
		font-size: 16px;
	}
	.items {
		// display: flex;
		// justify-content: flex-start;
		// flex-wrap: wrap;
		padding: 20px 16px;
		.item {
			a {
				display: block;
				width: 100%;
				padding: 14px 8%;
				// padding: 12px 0px;
				box-sizing: border-box;
				transition: none;
				border-radius: 6px;
				&:hover {
					background-color: #f2f8fd;
					h3 {
						color: #ee521c;
					}
					p {
						color: #525252;
					}
				}
				img {
					float: left;
					width: 26px;
					height: 26px;
					border-radius: 100%;
				}
				h3 {
					margin-left: 32px;
					color: #3c3c3c;
					font-size: 14px;
					white-space: nowrap;
					height: 26px;
					line-height: 26px;
					margin-bottom: 4px;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				p {
					// margin-left: 32px;
					color: #8f8f8f;
					font-size: 12px;
					height: 3em;
					line-height: 1.5em;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
		}
	}
}
.banner {
	float: left;
	width: 100%;
	border-radius: 10px;
	cursor: pointer;
	margin-top: 50px;
	opacity: 0.9;
	&:hover {
		opacity: 1;
	}
}
</style>
